<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page
	import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<%-- <title>${fns:getConfig('productName')}登录</title> --%>
<title>智慧预防接种信息管理系统</title>
<meta name="decorator" content="blank" />
<style type="text/css">
body{ margin: 0; padding: 0; background: #f2f2f2; }

.wrap{ width: 100%; min-width: 680px; min-height: 700px; }

.top-titlt{ width: 100%; height: 100px; padding: 40px 0 20px 0; }

.logo-name{
	width: 564px;
    height: 100px;
    font-family: simhei;
    font-weight: 700;
    font-size: 46px;
    color: #007bc7;
    line-height: 100px;
    padding-left: 90px;
    background: url(${ctxStatic}/images/logo.png) 0 no-repeat;
    background-size: 74px;
    margin: 0 auto;
}
.form-box{ 
	height: 350px; 
	padding-top: 176px; 
	background: url(${ctxStatic}/images/loginbg.png) center top no-repeat; 
	background: cover; 
}

.glass-bg{
	width: 670px;
	height: 350px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid #adadad;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
	border-radius: 10px;
	padding: 18px;
}
.form-ctn{
	width: 530px;
	height: 230px; 
	background: #fff;
	margin: 0;
	padding: 40px 50px; 
	display: table;
    overflow: hidden;
}
.input-sty{
	width:350px;
    background: #eeefef!important;
    border-radius: 20px!important;
    height: 28px!important;
    border: 0!important;
    font-size: 18px!important;
    padding: 6px 20px!important;
    margin-bottom: 20px!important;
}
.validate-sty{
	width:210px;
    background: #eeefef!important;
    border-top-left-radius: 20px!important;
	border-bottom-left-radius: 20px!important;
    height: 28px!important;
    border: 0!important;
    font-size: 18px!important;
    padding: 6px 20px!important;
    margin-bottom: 20px!important;
}
.add-on-box{
	height: 40px!important;
    padding: 0 6px!important;
    border: 0!important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)!important;
    background: #eeefef!important;
}
.add-on-btn{
	padding: 10px;
    border: none;
    color: #999;
    background: #eeefef;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    border-top-right-radius: 20px!important;
    border-bottom-right-radius: 20px!important;
}

.alert {
	position: absolute;
	width: 250px;
    text-align: center;
    left: 50%;
    margin-left: -125px;
}

label.error {
	background: none;
	width: 120px;
	font-weight: normal;
	color: inherit;
	margin: 0;
}
.footer{
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #888;
	position: fixed;
	bottom: 30px;
	z-index: -1;
}

</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("#loginForm").validate({
			rules : {
				validateCode : {
					remote : "${pageContext.request.contextPath}/servlet/validateCodeServlet"
				}
			},
			messages : {
				username : {
					required : "请填写用户名."
				},
				password : {
					required : "请填写密码."
				},
				validateCode : {
					remote : "验证码不正确.",
					required : "请填写验证码."
				}
			},
			errorLabelContainer : "#messageBox",
			errorPlacement : function(error, element) {
				error.appendTo($("#loginError").parent());
			}
		});
	});
	// 如果在框架或在对话框中，则弹出提示并跳转到首页
	if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
		alert('未登录或登录超时。请重新登录，谢谢！');
		top.location = "${ctx}";
	}
</script>
</head>
<body>
	<div class="wrap">
		<div class="top-titlt">
			<p class="logo-name">智慧预防接种信息管理系统</p>
		</div>
		<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
				<button data-dismiss="alert" class="close">×</button>
				<label id="loginError" class="error">${message}</label>
		</div>
		<div class="form-box">
			<div class="glass-bg">
					<form id="loginForm" class="form-signin form-ctn" action="${ctx}/login" method="post">
						<div style="vertical-align: middle;display: table-cell;">
							<div class="text-center">
								<input type="text" id="username" name="username" class="required input-sty" value="${username}" placeholder="用户名"> 
							</div>
							<div class="text-center">
								<input type="password" id="password" name="password" class="required input-sty" placeholder="密    码">
							</div>
							<c:if test="${isValidateCodeLogin}">
								<div class="validateCode text-center input-box">
									<sys:validateCode name="validateCode" inputCssStyle=""/>
								</div>
							</c:if>	
							<div class="text-center">	
								<input class="btn btn-primary" type="submit" value="登 录" style="width: 390px;height: 40px;border-radius: 20px;font-size: 22px;"/>
						    </div>
						</div>
					</form>
				
			</div>
		</div>
		<div class="footer">
				Copyright &copy; 2017-${fns:getConfig('copyrightYear')}
				- Powered By
				<a href="javascript:void(0);" target="_blank">智慧接种</a>
				<%-- - Version ${fns:getConfig('version')} --%>
		</div>
	</div>
</body>
</html>